<template>
  <div>
    <div class="user_details_title">
      <div class="title_icon" @click="back_to_left">
        <ArrowLeftOutlined/>
      </div>
      <div>
        <span>用户数据详情</span>
      </div>
    </div>
    <div class="user_details_box">
      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>登陆账号：</span>
        </div>
        <div>
          <a-input v-model:value="details_data.params.userName" disabled placeholder="暂无"/>
        </div>
      </div>

      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>真实姓名：</span>
        </div>
        <div>
          <a-input v-model:value="details_data.params.realName" placeholder="暂无"/>
        </div>
      </div>

      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>用户密码：</span>
        </div>
        <div>
          <a-input type="password" v-model:value="details_data.params.password" :disabled="true"
                   placeholder="暂无"/>
        </div>
      </div>


      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>联系方式：</span>
        </div>
        <div>
          <a-input v-model:value="details_data.params.phone" placeholder="暂无"/>
        </div>
      </div>

      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>用户生日：</span>
        </div>
        <div>
          <!--          <a-input v-model:value="details_data.params.birthDate" placeholder="暂无"/>-->
          <a-date-picker :default-value="details_data.date" v-model:value="details_data.params.birthDate" show-time
                         placeholder="Select Time" @change="onChange" @ok="onOk"/>
        </div>
      </div>
      <!--    sex-->
      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>性别：</span>
        </div>
        <div>
          <a-select
              v-model:value="details_data.params.sex"
              style="width:194px"
              @focus="focus('sex')"
              ref="select"
              @change="handleChange"
          >
            <a-select-option v-for="(item,index) in dic_data.sex_list" :key="index" :value="item.dictId">{{ item.name }}
            </a-select-option>
          </a-select>
        </div>
      </div>
      <a-divider/>


      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>公司名称：</span>
        </div>
        <div>
          <a-input v-model:value="details_data.params.companyName" placeholder="暂无"/>
        </div>
      </div>

      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>公司地址：</span>
        </div>
        <div>
          <a-input v-model:value="details_data.params.address" placeholder="暂无"/>
        </div>
      </div>
      <a-divider/>
      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>上次登录：</span>
        </div>
        <div>
          <a-input v-model:value="details_data.params.lastLoginTime" disabled placeholder="暂无"/>
        </div>
      </div>

      <div class="details_item">
        <!--      标题-->
        <div class="title">
          <span>用户创建：</span>
        </div>
        <div>
          <a-input v-model:value="details_data.params.createTime" disabled placeholder="暂无"/>
        </div>
      </div>
    </div>
    <!--    数据提交-->
    <div class="user_details_bottom">
      <a-button type="primary" @click="saveData">提交</a-button>
    </div>
  </div>
</template>

<script>
import {defineComponent, reactive, getCurrentInstance, createVNode} from "vue";
import {useStore} from "vuex"
import {ArrowLeftOutlined} from '@ant-design/icons-vue';
import {editUser} from "@/api/user"
import {ExclamationCircleOutlined} from '@ant-design/icons-vue';
import {Modal} from 'ant-design-vue';
import {useRouter} from "vue-router";
import {request_dic_data} from "@/utils/request_data_by_code";

export default defineComponent({
  setup() {
    const store = useStore();
    const router = useRouter()

    const dic_data = reactive({
      sex_list: []
    })

    // const {ctx} = getCurrentInstance();
    console.log("用户信息", store.state.user.user_data)
    const details_data = reactive({
      params: store.state.user.user_data,
      date: "",
    });

    const saveData = () => {
      Modal.confirm({
        title: '表单提交?',
        icon: createVNode(ExclamationCircleOutlined),
        content: '是否确认对当前的用户信息进行更改',
        okText: "已确认",
        cancelText: "取消",
        onOk() {
          save_data_request()
        },
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        onCancel() {
          console.log("点击取消")
        },
      });
    };
    const backToLeft = () => {
      Modal.confirm({
        title: '提醒?',
        icon: createVNode(ExclamationCircleOutlined),
        content: '数据已完成修改是否理解返回？',
        okText: "立即返回",
        cancelText: "取消",
        onOk() {
          router.back()
        },
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        onCancel() {
          console.log("点击取消")
        },
      });

    };
    //数据保存提交
    const save_data_request = async () => {
      let params = details_data.params
      const res = await editUser(params)
      console.log(res)
      if (res.code === 1) {
        backToLeft()
      }
    }

    function back_to_left() {
      router.back()
    }

    const onChange = (value, dateString) => {
      console.log('Selected Time: ', value);
      console.log('Formatted Selected Time: ', dateString);
    };

    const onOk = value => {
      console.log('onOk: ', value);
    };

    const focus = async (key) => {
      dic_data.sex_list = await request_dic_data(key)
    }


    return {
      details_data,
      backToLeft,
      saveData,
      back_to_left,
      onChange,
      onOk,
      dic_data,
      focus
    }
  },
  components: {
    ArrowLeftOutlined
  }
})
</script>

<style scoped lang="scss">
.user_details_title {
  display: flex;
  height: 2rem;
  font-weight: bolder;
  margin-bottom: 2rem;

  .title_icon {
    display: flex;
    align-items: center;
    margin-right: 1rem;
  }

  .title_icon:hover {
    cursor: pointer;
    color: #4d5aec;
  }
}

.user_details_box {
  display: flex;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;

  .details_item {
    display: flex;
    width: 50%;
    font-size: 14px;
    margin-bottom: 10px;

    .title {
      display: flex;
      align-items: center;
      width: 5rem;

    }
  }
}

.user_details_bottom {
  display: flex;
  justify-content: flex-start;
  height: 2rem;
  margin-top: 10px;
}
</style>
